<template>
	<view class="container">
		<view class="" v-for="(item,groupIndex) in lists" :key="groupIndex">
			<view class="title">
				{{item.name}}
			</view>
			<view class="list-box">
				<view class="list-box-item"
					:class="selectedItems[groupIndex] && selectedItems[groupIndex].id === i.id  ? 'active' : ''"
					v-for="(i,itemIndex) in item.child" :key="itemIndex" @click="changeOne(i, groupIndex, itemIndex)">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="btns" @click="submit">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 列表1
				currentOne: 0,
				lists: [],
				infoData: {}, //选择的信息
				selectedItems: {} // 用于存储每个组选中的item
			}
		},
		onLoad(options) {
			this.infoData = JSON.parse(options.infoData);
			this.getList();
		},
		methods: {
			// 获取标签列表
			getList() {
				this.$http.getLable().then(res => {
					if (res.code === 1) {
						this.lists = res.data;
						this.lists.forEach((group, index) => {
							if (group.child && group.child.length > 0) {
								this.$set(this.selectedItems, index, group.child[0]);
							}
						});
					} else {
						this.$helper.toast('none', res.msg);
					}
				});
			},
			// 列表1点击
			changeOne(item, groupIndex, itemIndex) {
				// / 更新选中项
				this.$set(this.selectedItems, groupIndex, item);
			},
			// 提交
			submit() {
				let selectedNames = this.lists
					.map((group, index) => this.selectedItems[index]?.name || '')
					.filter(name => name) // 过滤掉空值
					.join(',');
				this.infoData.label = selectedNames
				console.log(this.infoData, 'this.infoData')
				this.$http.editUserInfo(this.infoData).then(res => {
					if (res.code === 1) {
						this.$helper.toast('none', '用户信息编写完成');
						setTimeout(()=>{
							this.$helper.tap('/pages/tabBar/index/index')
						},500)
					} else {
						this.$helper.toast('none', res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 25rpx;

		.title {
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 600;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.list-box {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.list-box-item {
				width: 152rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 1px solid #CCCCCC;
				text-align: center;
				line-height: 56rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin: 20rpx 20rpx 0 0;
			}

			.active {
				background: #000000;
				color: #fff;
			}
		}
	}

	.btns {
		width: 630rpx;
		height: 90rpx;
		background: rgba(51, 51, 51, 0.8);
		border-radius: 49rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		margin-top: 150rpx;
	}
</style>